<template>
  <div class="login-container">
    <div class="no-login">
      <img src="../images/09eae8d5-be6b-46f4-9e27-ff53b53a4360.png" />
    </div>
    <div class="btn-show" @click="handleGoLogin"></div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'LoginSong',
  data() {
    return {}
  },
  methods: {
    ...mapMutations('header', ['SWITCH_POPUP']),
    handleGoLogin() {
      console.log('打开弹窗')
      this.SWITCH_POPUP(true)
      document.documentElement.style.overflow = 'hidden'
    }
  },
  computed: {
    ...mapState({
      switchPopUp: (state) => state.header.switchPopUp
    })
  }
}
</script>

<style  scoped>
.login-container {
  position: relative;
  height: 650px;
  width: 1000px;
  border: 1px solid #ccc;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.no-login {
  height: 263px;
  overflow: hidden;
  /* border: 1px solid red; */
}
.btn-show {
  position: absolute;
  top: 392px;
  right: 255px;
  width: 167px;
  height: 48px;
  /* border: 3px solid red; */
  background: url('../images/09eae8d5-be6b-46f4-9e27-ff53b53a4360.png') 0 693px;
  overflow: hidden;
  cursor: pointer;
}
</style>
